<template>
	<view>
		<u-navbar :back-icon-name="scene == 'share' ? 'home' : 'arrow-left'" :custom-back="back" :border-bottom="false" title="门店详情" :back-text-style="numberStyle" :back-text="number != 0 ? number + 's' : ''"></u-navbar>
		<view class="loading" v-if="loading || fail">
			<u-loading :show="loading"></u-loading>
			<u-empty mode="page" :show="fail"></u-empty>
		</view>
		<block v-else>
			<view class="swiper">
				<!-- <u-swiper @click="preview" bg-color="#fff" effect3d height="400" border-radius="20" :list="storeInfo.imgIndoor"></u-swiper> -->
				<swiper circular @change="swiperChange" :autoplay="storeInfo.imgIndoor[swiperIndex].type == 'video' ? false : true" indicator-dots indicator-active-color="#fff">
					<swiper-item v-for="(item, index) in storeInfo.imgIndoor" :key="index">
						<view class="swiper-item">
							<u-image v-if="item.type != 'video'" @click="preview(index)" border-radius="20" width="100%" height="400" :src="item.url" />
							<video
								id="video"
								v-if="item.playAddress"
								:title="storeInfo.merchantName"
								:enable-progress-gesture="false"
								:src="item.playAddress"
								:poster="item.videoCover"
							></video>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<u-gap></u-gap>
			<view class="info">
				<view class="name">{{ storeInfo.merchantName }}</view>
				<view class="rate">
					<u-rate active-color="#F39D21" inactive-color="#AAAAAA" inactive-icon="star-fill" :count="5" v-model="value"></u-rate>
					<view class="rate-number">评分 {{ storeInfo.totalScore || '5.0' }}</view>
				</view>
			</view>
			<u-gap></u-gap>
			<view class="detail">
				
				<view @click="showMap">
					<u-icon name="map" size="48"></u-icon>
					<view style="margin-left: 10rpx;border-right: 1rpx solid #E5E5E5;margin-right: 20rpx;padding-right: 20rpx;">{{ storeInfo.merchantAddress }}</view>
					<view @click.stop="call"><u-icon name="phone-fill" size="38" color="#5FCD0E"></u-icon></view>
				</view>
			</view>

			<u-gap height="60"></u-gap>
			<view class="activity">
				<view class="tab">
					<u-tabs
						font-size="48"
						:show-bar="false"
						inactive-color="#aaa"
						active-color="#000"
						:list="activityTab"
						:is-scroll="false"
						:current="activityTabIndex"
						@change="onActivityTabchange"
					></u-tabs>
				</view>
				<block class="" v-if="activityTabIndex == 0">
					<view class="vip" v-if="cardList != ''">
						<view class="item" v-for="(item, index) in cardList" :key="index" v-if="item.status == 1">
							<u-image :show-loading="false" :src="item.bg" width="100%" height="290"></u-image>
							<view class="item-box">
								<u-image borStyle="3rpx solid #ffffff" :src="imageURL + storeInfo.imgLogo" width="68" height="68" shape="circle"></u-image>
								<view class="info-box" @click="setVipCardData(item)">
									<view class="upper">
										<view>{{ item.merchantAlias }}</view>
										<view>
											<text>{{ percentOff(item.percentOff) }}</text>
											折
										</view>
									</view>
									<view class="lower">
										<view>{{ item.title }}</view>
										<view class="desc">
											<text>{{ item.vipDayDesc }}</text>
										</view>
										<view>
											{{ item.priceAvailableDesc }}
											<view>
												详情
												<u-icon name="arrow-right"></u-icon>
											</view>
										</view>
									</view>
								</view>
								<view class="state" @click="receiveOnlyCard(item.id)"><text>立即领取</text></view>
							</view>
						</view>
						<u-gap></u-gap>
					</view>
					<!-- <view class="vip" v-if="cardList != ''">
						<u-gap height="10"></u-gap>
						<view class="list">
							<view class="item" v-for="(item,index) in cardList" :key="index" v-if="item.status == 1">
								<view class="item-content">
									<view class="discount">
										{{percentOff(item.percentOff)}}<text>折</text>
									</view>
									<view class="info">
										<view>{{item.title}}
											<u-tag border-color="#FE433C" color="#fff" bg-color="#FE433C" shape="circle" text="立即领取" @click="receiveOnlyCard(item.id)" />
										</view>
										<view>{{item.description || '暂无描述'}}</view>
										<view @click="cardIndex = index == cardIndex ? null : index">
											更多详情
											<view>
												<u-icon size="20" :name="cardIndex == index ? 'arrow-up' : 'arrow-down'" color="#fff"></u-icon>
											</view>
										</view>
									</view>
								</view>
								<view :class="['item-info',index == cardIndex ? 'active' : '']">
									<view>店铺名称：<view>{{item.merchantAlias}}</view>
									</view>
									<view>活动时间：<view>{{item.validStartTime}} - {{item.validEndTime || '长期'}}</view>
									</view>
									<view>{{item.vipDayDesc}}</view>
									<view>会员卡描述：<view>{{item.description || '暂无描述'}}</view>
									</view>
								</view>
							</view>
						</view>
					</view> -->
					<view v-else style="padding: 100rpx 0;"><u-empty text="暂未发布会员卡"></u-empty></view>
				</block>
				<view class="block1" v-if="activityTabIndex == 1">
					<block v-if="storeInfo.sharePackageList != ''">
						<view class="tab">
							<u-tabs
								name="classLabel"
								:bar-style="{ background: 'linear-gradient(90deg, #FF7200, #FECD62)', 'border-radius': '3rpx' }"
								font-size="36"
								inactive-color="#aaa"
								active-color="#000"
								:list="storeInfo.sharePackageList"
								:current="setMealTabIndex"
								@change="$event => (setMealTabIndex = $event)"
							></u-tabs>
						</view>
						<u-gap height="20"></u-gap>
						<scroll-view scroll-x>
							<view class="box">
								<view
									class="item"
									@click="
										$u.route('/pages/other/setmeal/setmeal', {
											id: item.id,
											type: 'setMeal'
										})
									"
									v-for="(item, index) in storeInfo.sharePackageList[setMealTabIndex].sharePackageVOList"
									:key="index"
								>
									<u-image :src="item.sharePackageImg ? imageURL + item.sharePackageImg : ''" width="300" height="200"></u-image>
									<view class="info">
										<view class="title">{{ item.title }}</view>
										<view class="tag">
											<view>
												<view>分享返</view>

												<view>￥{{ item.shareRebateFee }}</view>
											</view>
										</view>
										<view class="money">
											<view>
												<text class="symbol">￥</text>
												{{ item.packagePrice }}
												<text class="original-price">原价:￥{{ item.orignPrice }}</text>
											</view>
											<view><u-icon name="arrow-right" color="#aaa"></u-icon></view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</block>
					<view v-else style="padding: 100rpx 0;"><u-empty text="暂未发布优惠套餐" mode="coupon"></u-empty></view>
				</view>
				<view class="block1" v-if="activityTabIndex == 2">
					<block v-if="storeInfo.couponList != ''">
						<u-gap height="20"></u-gap>
						<scroll-view scroll-x>
							<view class="box">
								<view
									class="item"
									@click="
										$u.route('/pages/other/setmeal/setmeal', {
											id: item.id,
											type: 'coupon'
										})
									"
									v-for="(item, index) in storeInfo.couponList"
									:key="index"
								>
									<u-image :src="item.couponImg ? imageURL + item.couponImg : ''" width="300" height="200"></u-image>
									<view class="info">
										<view class="title">{{ item.title }}</view>
										<view class="tag">
											<view>
												<view>分享返</view>

												<view>￥{{ item.shareRebateFee }}</view>
											</view>
										</view>
										<view class="money">
											<view>
												<text class="symbol">￥</text>
												{{ item.price }}
												<text class="original-price">原价:￥{{ item.priceOff }}</text>
											</view>
											<view><u-icon name="arrow-right" color="#aaa"></u-icon></view>
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</block>
					<view v-else style="padding: 100rpx 0;"><u-empty text="暂未发布优惠券" mode="coupon"></u-empty></view>
				</view>
			</view>
			<!-- <u-gap v-if="!storeInfo.sellerStoreOtherInfo"></u-gap> -->
			<view class="img-detail">
				<view class="title">图片详情</view>
				<block v-if="storeInfo.sellerStoreOtherInfo && storeInfo.sellerStoreOtherInfo.detailImg">
					<view class="item" v-for="(item, index) in storeInfo.sellerStoreOtherInfo.detailImg" :key="index">
						<u-image border-radius="20" :src="imageURL + item" width="100%" mode="widthFix"></u-image>
					</view>
				</block>
				<block v-else>
					<view style="padding: 100rpx 0;"><u-empty mode="data" text="商家暂未上传详情图"></u-empty></view>
				</block>
				<u-gap></u-gap>
			</view>
			<u-gap v-if="cardList == ''"></u-gap>
			<u-divider>我也是有底线的</u-divider>
			<u-gap></u-gap>
			<view class="safe-area-inset-bottom"></view>
			<view class="bar">
				<view class="bar-box">
					<button open-type="share" class="icon">
						<u-icon size="48" name="zhuanfa"></u-icon>
						<view>分享</view>
					</button>
					<view class="icon" @click="collection">
						<u-icon size="48" :color="storeInfo.isCollect ? '#F39D21' : '#000'" :name="storeInfo.isCollect ? 'star-fill' : 'star'"></u-icon>
						<view>收藏</view>
					</view>
					<view class="btn-box">
						<view v-if="storeInfo.hasRedPacket" @click="receive" :class="['btn', number == 0 ? 'active' : '']">
							{{ number != 0 ? number + 's后领取' : '领取红包' }}
						</view>
						<view class="btn" v-else>领取红包</view>
						<view
							@click="
								receiveType = storeInfo.hasVipCard ? 1 : false;
								receiveCard();
							"
							:class="['btn', storeInfo.hasVipCard ? 'active' : '']"
						>
							领取所有卡
						</view>
					</view>
				</view>
				<view class="safe-area-inset-bottom"></view>
			</view>

			<u-modal
				@confirm="
					isToHome
						? $u.route({
								type: 'tab',
								url: '/pages/tabBar/newIndex/newIndex'
						  })
						: $u.route({ type: 'back' })
				"
				show-cancel-button
				v-model="show"
				:content="number + '秒后就可以领取红包了哦，确认要离开吗？'"
				cancel-text="再等等"
				confirm-color="#FF4D46"
			></u-modal>

			<u-popup v-model="showHbPopup" mode="center" :backgroundColor="'transparent'">
				<view class="popup-hb">
					<view class="popup-image">
						<block v-if="receiveType == 0">
							<u-image :fade="false" :show-loading="false" width="442" height="500" :src="imageURL + 'USER/e577ce96-708a-498e-a618-16960ed5a516.png'"></u-image>
							<view class="result" v-if="drawRedPacketNumber != null">
								恭喜您获得红包
								<view>
									{{ drawRedPacketNumber }}
									<text>元</text>
								</view>
							</view>
							<view class="btn" @click="closePopup"></view>
						</block>

						<block v-if="receiveType == 1">
							<u-image :fade="false" :show-loading="false" width="442" height="500" :src="imageURL + 'USER/08d5d974-cb61-4dfb-801f-6c0ebf96cbcb.png'"></u-image>
							<view class="card-btn" @click="closePopup('jump')"></view>
						</block>
					</view>
				</view>
			</u-popup>
			<u-gap></u-gap>
			<u-gap></u-gap>
			<u-gap></u-gap>
			<u-gap></u-gap>
		</block>
	</view>
</template>

<script>
import WSCoordinate from '@/js_sdk/WSCoordinate';
export default {
	onShareAppMessage() {
		return {
			title: this.storeInfo.merchantName,
			imageUrl: this.imageURL + this.storeInfo.imgLogo,
			path: '/pages/other/newStoreDetail/newStoreDetail?userId=' + this.userId + '&source=share' + '&store_id=' + this.store_id
		};
	},
	onShareTimeline() {
		return {
			title: this.storeInfo.merchantName,
			imageUrl: this.imageURL + this.storeInfo.imgLogo,
			path: '/pages/other/newStoreDetail/newStoreDetail?userId=' + this.userId + '&source=share' + '&store_id=' + this.store_id
		};
	},
	data() {
		return {
			setMealTabIndex: 0,
			activityTabIndex: 0,
			activityTab: [
				{
					name: '会员卡'
				},
				{
					name: '优惠套餐'
				},
				{
					name: '优惠券'
				}
			],
			isToHome: false,
			drawRedPacketNumber: null,
			showHbPopup: false,
			swiperIndex: 0,
			value: 5,
			cardList: [],
			show: false,
			showPopup: false,
			cardItem: '',
			imageURL: this.imageURL,
			number: 0,
			receiveType: false,
			loading: true,
			cardIndex: null,
			fail: false,
			scene:'',
			numberStyle: {
				color: '#FF4D46',
				'font-weight': 800,
				'font-size': '36rpx'
			},
			storeInfo: ''
		};
	},
	onReady: function(res) {
		this.videoContext = uni.createVideoContext('video');
	},
	onUnload() {
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	onLoad(options) {
		this.userId = uni.getStorageSync('userInfo').id || '';

		let store_id = options.store_id;
		// let store_id = 88907395
		this.store_id = store_id;
		if (options.userId) {
			this.scene = 'share'
			if (!uni.getStorageSync('userInfo')) {
				uni.setStorageSync('proUserId', options.userId);
			}
		}

		this.isToHome = options.source == 'share' ? true : false;
		// options.store_id
		this.$u
			.get('sellerstore/getStoreOtherInfo/' + store_id)
			.then(res => {
				if (res.hasRedPacket) {
					this.number = res.brownsTime;
				}
				this.loading = false;
				if (res.sellerStoreOtherInfo) {
					if (res.sellerStoreOtherInfo.otherImg) {
						res.imgIndoor = res.sellerStoreOtherInfo.otherImg.split(',');
					} else {
						res.imgIndoor = res.imgIndoor.split(',');
					}
					if (res.sellerStoreOtherInfo.detailImg) {
						res.sellerStoreOtherInfo.detailImg = res.sellerStoreOtherInfo.detailImg.split(',');
					}
				} else {
					res.imgIndoor = res.imgIndoor.split(',');
				}
				let imgIndoor = res.imgIndoor.map(item => {
					return {
						url: this.imageURL + item
					};
				});
				if (res.videoShortInfos) {
					if (res.videoShortInfos.playAddress) {
						imgIndoor.unshift({
							playAddress: res.videoShortInfos.playAddress,
							videoCover: res.videoShortInfos.videoCover,
							type: 'video'
						});
						if (imgIndoor[this.swiperIndex].type == 'video') {
							this.videoContext.play();
						}
					}
				}
				res.imgIndoor = imgIndoor;
				this.storeInfo = res;
				this.timer = setInterval(() => {
					this.number--;
					if (this.number <= 0) {
						this.number = 0;
						if (this.show) {
							this.show = false;
						}
						clearInterval(this.timer);
					}
				}, 1000);
				if (res.storeCardVOS) {
					let bgArr = [
						'https://photo.hiyipin.net/USER/fce18b57-88d0-4307-9b14-39d1a8548b3c.png',
						'https://photo.hiyipin.net/USER/098603b4-28f4-49c6-a828-2242d5b421af.png',
						'https://photo.hiyipin.net/USER/d2f87721-aacc-4541-ab26-369c68689ba2.png',
						'https://photo.hiyipin.net/USER/e7b2fa94-ac5c-4f8a-adaa-f211a6c1b988.png',
						'https://photo.hiyipin.net/USER/6c76f088-dbfa-406d-ad42-e6c40e909e2a.png',
						'https://photo.hiyipin.net/USER/adc0b9eb-9766-4f96-81d6-83a7b0bca4e4.png'
					];
					res.storeCardVOS.forEach(item => {
						let index = Math.floor(Math.random() * bgArr.length);
						item.bg = bgArr[index];
						// bgArr.splice(index, 1)
					});
					this.cardList = res.storeCardVOS;
				}
			})
			.catch(error => {
				this.loading = false;
				this.fail = true;
				this.number = 0;
				console.log(error);
			});
	},
	methods: {
		setVipCardData(item) {
			item.logo = this.imageURL + this.storeInfo.imgLogo;
			uni.setStorageSync('vipCardData', item);
			this.$u.route('/pages/other/vipCardDetail/vipCardDetail');
		},
		onActivityTabchange(index) {
			this.activityTabIndex = index;
		},
		percentOff(number) {
			return number == undefined ? 0 : Math.floor(number * 10 * 100) / 100;
		},
		receiveCard() {
			if (!uni.getStorageSync('userInfo')) {
				this.$u.route('/pages/user/login/login');
				return;
			}
			this.$u
				.post('vipcardtemplate/drawAllVipCard', {
					storeId: this.store_id
				})
				.then(res => {
					this.showHbPopup = true;
				});
		},
		receiveOnlyCard(id) {
			if (!uni.getStorageSync('userInfo')) {
				this.$u.route('/pages/user/login/login');
				return;
			}
			this.$u
				.post('vipcardtemplate/drawVipCard', {
					storeId: this.store_id,
					vipStoreCardId: id
				})
				.then(res => {
					this.showHbPopup = true;
					this.receiveType = 1;
				});
		},
		collection() {
			this.$u
				.post('sellerstorecollect/save', {
					storeId: this.store_id,
					status: this.storeInfo.isCollect ? 0 : 1
				})
				.then(res => {
					this.storeInfo.isCollect = !this.storeInfo.isCollect;
					uni.showToast({
						title: '操作成功'
					});
				});
		},
		closePopup(type) {
			this.showHbPopup = false;
			this.drawRedPacketNumber = null;
			if (type == 'jump') {
				this.$u.route({
					url: '/pages/user/myCard/myCard'
				});
			}
		},
		showMap() {
			let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(this.storeInfo.latitude, this.storeInfo.longitude);
			uni.openLocation({
				latitude: GCJ_Coordinate.latitude,
				longitude: GCJ_Coordinate.longitude,
				name: this.storeInfo.merchantName,
				address: this.storeInfo.merchantAddress
			});
		},
		showTip() {
			uni.showToast({
				title: '暂未开放',
				icon: 'none'
			});
		},
		receive() {
			if (this.number == 0) {
				this.receiveHB();
			}
		},
		receiveHB() {
			this.$u
				.post('storeadvertisetemplate/drawRedPacket', {
					storeId: this.storeInfo.id
				})
				.then(res => {
					this.drawRedPacketNumber = res.redMoney;
					this.showHbPopup = true;
					this.receiveType = 0;
				});
		},
		call() {
			uni.makePhoneCall({
				phoneNumber: this.storeInfo.merchantServicePhone
			});
		},
		back() {
			if (this.number == 0) {
				if (this.isToHome) {
					this.$u.route({
						url: '/pages/tabBar/newIndex/newIndex',
						type: 'tab'
					});
					return;
				}
				this.$u.route({
					type: 'back'
				});
			} else {
				this.show = true;
			}
		},
		preview(e) {
			let arr = [];
			this.storeInfo.imgIndoor.forEach(item => {
				if (item.type != 'video') {
					arr.push(item.url);
				}
			});
			uni.previewImage({
				current: e,
				urls: arr
			});
		},
		swiperChange(e) {
			this.swiperIndex = e.detail.current;
			if (this.storeInfo.imgIndoor[e.detail.current].type == 'video') {
				this.videoContext.play();
			} else {
				this.videoContext.pause();
			}
		}
	}
};
</script>

<style lang="scss">
.activity {
	.tab {
	}

	.block1 {
		.tab {
			position: relative;

			&::after {
				width: 690rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 3px;
				content: '';
				height: 1rpx;
				background-color: #e5e5e5;
			}
		}

		scroll-view {
			white-space: nowrap;
			box-sizing: border-box;

			.box {
				height: 420rpx;
				padding-bottom: 30rpx;
			}
		}

		.item {
			&:last-child {
				margin-right: 30rpx;
			}

			display: inline-block;
			width: 300rpx;
			height: 100%;
			// margin: 0 30rpx;
			margin-left: 30rpx;
			box-shadow: 0px 5rpx 25rpx rgba(0, 0, 0, 0.1);
			border-radius: 20rpx;
			position: relative;
			z-index: 1;
			overflow: hidden;

			.info {
				padding: 20rpx;

				.money {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					> view {
						&:first-child {
							font-size: 40rpx;
							color: #ff4d46;
							font-weight: bold;

							text {
								&.symbol {
									font-size: 20rpx;
									font-weight: normal;
								}

								&.original-price {
									font-weight: normal;
									font-size: 22rpx;
									margin-left: 15rpx;
									color: #aaaaaa;
									text-decoration: line-through;
								}
							}
						}

						&:last-child {
							padding-bottom: 5rpx;
						}
					}
				}

				.tag {
					display: inline-block;
					height: 34rpx;
					margin: 15rpx 0;

					> view {
						view {
							display: inline-block;
							text-align: center;
							font-size: 24rpx;
							// flex: 1;
							padding: 0 10rpx;

							&:first-child {
								background-color: #ff4d46;
								border: 1rpx solid #ff4d46;
								transform: rotateZ(360deg);
								color: #fff;
								border-radius: 4rpx 0 0 4rpx;
							}

							&:last-child {
								color: #ff4d46;
								border: 1rpx solid #ff4d46;
								border-left: none;
								border-radius: 0 4rpx 4rpx 0;
								transform: rotateZ(360deg);
							}
						}
					}
				}

				.title {
					color: #333333;
					// font-weight: bold;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					// white-space: normal;
				}
			}
		}
	}
}

.img-detail {
	padding: 0 30rpx;

	.item {
		margin-top: 30rpx;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
	}
}

.popup-hb {
	.btn {
		position: absolute;
		width: 280rpx;
		height: 75rpx;
		bottom: 44rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.result {
		position: absolute;
		// top: 150rpx;
		top: 85rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;

		view {
			margin-top: 10rpx;
			font-size: 60rpx;
			color: #e41c34;

			text {
				font-size: 30rpx;
			}
		}
	}

	// .btn {
	// 	width: 154rpx;
	// 	height: 154rpx;

	// 	display: flex;
	// 	justify-content: center;
	// 	position: absolute;
	// 	align-items: center;
	// 	top: 105rpx;
	// 	padding-top: 7rpx;
	// 	// width: 100%;
	// 	left: 50%;
	// 	transform: translateX(-50%);

	// 	text {
	// 		font-size: 65rpx;
	// 		color: #fff;
	// 		font-weight: bold;
	// 		display: inline-block;
	// 		// transform: translateY(-7rpx);
	// 		text-shadow: 0 0.1em 0.05em rgba($color: #000000, $alpha: .5);
	// 	}
	// }

	top: 0;
	left: 0;
	justify-content: center;
	z-index: 999;

	.card-btn {
		position: absolute;
		bottom: 0;
		height: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 270rpx;
	}

	.popup-image {
		position: relative;
	}
}

// .popup {
// 	padding: 0 30rpx;
// 	padding-bottom: 30rpx;

// 	.title {
// 		line-height: 80rpx;
// 		padding: 20rpx 0;
// 		font-size: 48rpx;
// 		font-weight: bold;
// 		margin-bottom: 20rpx;
// 	}

// 	.item {
// 		display: flex;

// 		&:last-child {
// 			margin-top: 30rpx;
// 		}

// 		>view {
// 			font-size: 30rpx;

// 			&:first-child {
// 				font-weight: bold;
// 			}

// 			&:last-child {
// 				flex: 1;
// 			}
// 		}
// 	}

// 	.number {
// 		font-size: 72rpx;
// 		font-weight: bold;
// 		margin-bottom: 30rpx;

// 		text {
// 			font-size: 30rpx;
// 			font-weight: normal;
// 		}
// 	}
// }

page {
	// padding-bottom: 120rpx;
}

.vip {
	.item {
		position: relative;
		height: 260rpx;

		.item-box {
			.state {
				width: 88rpx;
				writing-mode: tb-rl;
				display: flex;
				font-size: 30rpx;
				align-items: center;
				justify-content: center;
				color: #f44b17;

				text {
					// line-height: 40rpx;
					letter-spacing: 13rpx;
				}
			}

			position: absolute;
			width: 690rpx;
			height: 230rpx;
			left: 30rpx;
			bottom: 0;
			display: flex;
			padding: 30rpx;
			padding-right: 0;

			.info-box {
				color: #fff;
				padding: 0 20rpx;
				flex: 1;

				.lower {
					font-size: 24rpx;

					> view {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 5rpx;
					}

					.desc {
						width: 450rpx;

						text {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.upper {
					position: relative;
					padding-top: 10rpx;
					margin-bottom: 10rpx;

					view {
						&:first-child {
							font-size: 36rpx;
							width: 370rpx;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						&:last-child {
							font-size: 30rpx;
							font-weight: normal;
							position: absolute;
							right: 0;
							top: 50%;
							transform: translateY(-50%);

							text {
								font-size: 60rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
}

.loading {
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bar {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	background-color: #fff;
	z-index: 1;
	box-shadow: 2rpx -20rpx 20rpx 0px rgba(220, 220, 219, 0.2);

	.bar-box {
		display: flex;
		align-items: center;
		height: 120rpx;
		padding-right: 30rpx;

		button {
			background-color: transparent;
			line-height: normal;
			font-size: 30rpx;
			padding: 0;
			margin: 0;

			&::after {
				transform: scale(1);
				border: none;
			}
		}

		.icon {
			padding: 0 30rpx;
			text-align: center;
		}

		.btn-box {
			display: flex;
			flex: 1;
		}

		.btn {
			background-color: #ff4d46;
			flex: 1;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			font-size: 30rpx;
			border-radius: 20rpx;
			opacity: 0.5;
			transition: opacity 0.3s;

			&:last-child {
				margin-left: 30rpx;
				background-color: #f39d21;

				&.active {
					opacity: 1;
				}
			}

			&.active {
				opacity: 1;
			}
		}
	}
}

.swiper {
	swiper {
		height: 400rpx;

		.swiper-item {
			padding: 0 30rpx;
			height: 100%;

			video {
				width: 100%;
				height: 400rpx;
				border-radius: 20rpx;
			}
		}
	}
}

.detail {
	padding: 0 30rpx;

	> view {
		display: flex;
		font-size: 30rpx;
		align-items: center;

		.state {
			border-right: 1rpx solid #e5e5e5;
			margin-right: 10rpx;
			padding: 0 10rpx;
		}
	}
}

.info {
	padding: 0 30rpx;

	.rate {
		display: flex;
		align-items: center;

		.rate-number {
			color: #f39d21;
			font-size: 30rpx;
			margin-left: 15rpx;
		}
	}

	.name {
		font-size: 48rpx;
		margin-bottom: 10rpx;
		font-weight: 800;
	}
}
</style>
